import Vue from 'vue';
import { Component, Prop, Watch } from 'vue-property-decorator';
import './app-visual-dropdown-list.less';

/**
 * @description 虚拟表单下拉列表
 * @export
 * @class AppVisualDropDownList
 * @extends {Vue}
 */
@Component({})
export class AppVisualDropDownList extends Vue {

  /**
   * @description 编辑器实列
   * @type {*}
   * @memberof AppVisualDropDownList
   */
  @Prop() editorInstance!: any;

  /**
   * @description 表单项
   * @type {*}
   * @memberof AppVisualDropDownList
   */
  @Prop() public parentItem!: any;

  /**
   * @description 编辑器值
   * @type {string}
   * @memberof AppVisualDropDownList
   */
  @Prop() public value!: string;

  /**
   * @description 编辑器名称
   * @type {string}
   * @memberof AppVisualDropDownList
   */
  @Prop() public name!: string;

  /**
   * @description 编辑器位置
   * @type {*}
   * @memberof AppVisualDropDownList
   */
  @Prop() public position!: any;

  /**
   * @description 代码表服务
   * @type {*}
   * @memberof AppVisualDropDownList
   */
  @Prop() public codeListService!: any;

  /**
   * @description 上下文
   * @type {string}
   * @memberof AppVisualDropDownList
   */
  @Prop() context!: any;

  /**
   * @description 视图参数
   * @type {string}
   * @memberof AppVisualDropDownList
   */
  @Prop() viewparam!: any;

  /**
   * @description 真实控件
   * @type {string}
   * @memberof AppVisualDropDownList
   */
  @Prop() realCompRef!: any;

  /**
   * @description 下拉列表数据
   * @type {any[]}
   * @memberof AppVisualDropDownList
   */
  public items: any[] = [];

  /**
   * @description 下拉列表数据改变
   * @param {*} newVal 新值
   * @param {*} oldVal 旧值
   * @memberof AppVisualDropDownList
   */
  @Watch('realCompRef.items',{
    deep:true,
    immediate:true
  })
  public listItemsChange(newVal: any[], oldVal: any[]) {
    if (newVal?.length > 0) {
      this.items = [... newVal];
    }
  }

  /**
   * @description 选中值变化
   * @param {*} $event
   * @memberof AppVisualDropDownList
   */
  public selectChange($event: any) {
    this.$emit('change', { name: this.name, value: $event?.target.value });
  }

  /**
   * @description 绘制分组项
   * @param {*} item
   * @memberof AppVisualDropDownList
   */
  public renderOptGroup(item: any) {
    return (
      <optgroup 
        label={item.text}
        class="dropdown-list__option group"
        disabled={item.disabled}>
        {item.children.map((child: any) => {
          return this.renderOption(child); 
        })}
      </optgroup>
    )
  }

  /**
   * @description 绘制选项
   * @param {*} item
   * @memberof AppVisualDropDownList
   */
  public renderOptItem(item: any) {
    return (
      <option
        disabled={item.disabled}
        value={item.value}
        class="dropdown-list__option option"
        selected={Object.is(this.value, item.value)}
      >
        {item.text}
      </option>
    )
  }

  /**
   * @description 绘制选项
   * @param {*} item
   * @memberof AppVisualDropDownList
   */
  public renderOption(item: any) {
    if (item.children) {
      return this.renderOptGroup(item);
    } else {
      return this.renderOptItem(item);
    }
  }

  /**
   * @description 绘制组件
   * @return {*}
   * @memberof AppVisualDropDownList
   */
  public render() {
    return (
      <div class={'app-visual-dropdown-list luckysheet-mousedown-cancel'}>
        <select
          class="dropdown-list__inner luckysheet-mousedown-cancel"
          disabled={this.realCompRef?.disabled}
          onChange={($event: any) => this.selectChange($event)}
        >
          {this.items.length > 0 && <option
            class="dropdown-list__option default">
          </option>}
          {
            this.items.map((item: any) => {
              return this.renderOption(item);
            })
          }
        </select>
      </div>
    );
  }
}
